<script setup lang="ts">
  import IconifyIcon from "@/components/IconifyIcon/index.vue";
  import { ArrowRight, Edit, Search } from "@element-plus/icons-vue";
  import CxHeader from "@/components/CxHeader/index.vue";
  import { ref, watch, onMounted } from "vue";
  import { useData } from "./utils/index.tsx";
  import { searchProduct, searchTip } from "@/api/product.js";

  const value = ref("关键词");
  // 搜素关键词
  const keyword = ref("");
  const options = [
    {
      value: "关键词",
      label: "关键词",
    },
    {
      value: "货号",
      label: "货号",
    },
    {
      value: "CAS",
      label: "CAS",
    },
  ];

  const {
    total,
    route,
    brandList,
    categoryList,
    productList,
    dragScroll,
    handlePageChange,
  } = useData();

  onMounted(() => {
    const scrollContainers = document.querySelectorAll(".scrollContainer"); // 使用类选择器获取所有容器
    dragScroll(scrollContainers);
  });
</script>

<template>
  <CxHeader />
  <!-- PE 搜素框 -->
  <div class="flex flex-col xl:w-[1200px] mx-auto">
    <div class="search-bar flex md:hidden items-center p-2 w-[auto]">
      <el-select v-model="value" style="width: 100px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </el-select>
      <div class="flex-1 relative">
        <el-input v-model="keyword" placeholder="请输入搜索内容" />
        <el-button
          :icon="Search"
          circle
          style="position: absolute; top: 1px; right: 6px; border: none"
        />
      </div>
    </div>
  </div>

  <main class="xl:w-[1200px] md:mx-auto">
    <div class="p-2">
      <div class="flex" :class="categoryList.length == 0 ? 'hidden' : ''">
        <div class="m-auto text-center w-[40px]" style="user-select: none">
          分类
        </div>
        <div
          class="scrollContainer flex flex-1 gap-2 p-2 overflow-auto overflow-x-hidden whitespace-nowrap"
        >
          <span
            class="rounded-full px-3 py-1 text-gray-500 border-gray-300 border-solid border-[1px]"
            v-for="category in categoryList"
            :key="category?.id"
            style="user-select: none"
            >{{ category?.name }}</span
          >
        </div>
      </div>
      <div class="flex" :class="brandList.length == 0 ? 'hidden' : ''">
        <div class="m-auto text-center w-[40px]" style="user-select: none">
          品牌
        </div>
        <div
          class="scrollContainer flex flex-1 gap-2 p-2 overflow-auto overflow-x-hidden whitespace-nowrap"
        >
          <span
            class="rounded-full px-3 py-1 text-gray-500 border-gray-300 border-solid border-[1px]"
            v-for="brand in brandList"
            :key="brand?.id"
            style="user-select: none"
            >{{ brand?.name }}</span
          >
        </div>
      </div>
    </div>
    <div v-if="productList.length > 0">
      <div
        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 px-2 sm:px-0"
      >
        <!-- 商品卡片 -->
        <div
          class="bg-white rounded-lg shadow-md overflow-hidden grid grid-cols-2 sm:grid-cols-1"
          v-for="product in productList"
          :key="product?.productid"
        >
          <img
            :src="product?.mainphoto"
            onerror="javascript:this.src='src/assets/img/pro-logo.jpg'"
            :alt="product?.name"
            class="w-full h-full object-cover sm:mx-auto"
          />
          <div class="box-border p-3 sm:p-4">
            <h2 class="text-xl font-semibold">{{ product?.name }}</h2>
            <div class="flex flex-col md:flex-row md:justify-between">
              <div class="text-gray-700 text-sm">
                {{ product?.brandname }}
              </div>
              <div class="text-gray-700 text-sm">货号：{{ product?.code }}</div>
            </div>
            <div
              class="flex items-center pt-2 text-red-600 font-bold text-xl px-2 py-1"
            >
              ¥{{ product?.salaPrice }}
              <span
                class="text-gray-400 font-thin line-through px-2 py-1"
                style="font-size: 14px"
              >
                ¥{{ product?.markprice }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无商品内容" />

    <div class="overflow-hidden flex justify-center p-4">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="handlePageChange"
      />
    </div>
  </main>

  <el-backtop :right="100" :bottom="100" />
</template>

<style lang="scss" scoped>
  li {
    list-style: none;
  }
  // 搜索框基础样式
  .search-bar {
    :deep(.el-select__wrapper) {
      border-radius: 16px 0 0 16px;
    }
    :deep(.el-select__placeholder) {
      text-align: center;
    }
    :deep(.el-input__wrapper) {
      border-radius: 0 16px 16px 0;
    }

    :deep(.el-button) {
      height: 30px;
      width: 30px;
      &:hover {
        background-color: #fff;
      }
    }
  }
  .active-tag {
    color: #409eff;
    border: 1px solid #409eff;
  }
  .hidden {
    display: none;
  }
</style>
